<template>
    <div>
        <div class="item">
            <div class="title" @click="isExpand = !isExpand">{{ item.name }} / {{ item.search_engines.length }}</div>
            <div>
                <el-button link type="danger" size="small" @click="deleteCategoryVisible = true">删除</el-button>
                <el-button link type="success" size="small" @click="addWebVisible = true">添加网站</el-button>
                <el-button link type="primary" size="small" @click="updateCategoryVisible = true">更改</el-button>
            </div>
        </div>
        <div class="sub" v-show="isExpand">
            <ol>
                <li v-for="(web, idx) in item.search_engines" :key="web.id" class="sub-item">
                    <div>
                        {{ idx + 1 }}.
                        <a target="_blank" class="web-title" :href="web.uri">{{ web.name }}</a>
                        <a target="_blank" class="web-title" :href="web.uri">{{ web.uri }}</a>
                    </div>
                    <div>
                        <el-button link type="danger" size="small" @click="deleteWeb(web.id)">直接删除</el-button>
                    </div>
                </li>
            </ol>

        </div>

        <!-- 删除栏目 -->
        <el-dialog v-model="deleteCategoryVisible" title="Confirm" width="500">
            <span>确认删除 {{ item.name }} 吗?</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="deleteCategoryVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="deleteWebCategory">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 编辑栏目 -->
        <el-dialog v-model="updateCategoryVisible" title="Edit" width="500">
            <el-form>
                <el-form-item label="Name" :label-width="formLabelWidth">
                    <el-input v-model="item.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="updateCategoryVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="updateCategory">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 添加网站 -->
        <el-dialog v-model="addWebVisible" title="Add" width="500">
            <el-form label-width="auto">
                <el-form-item label="Url" :label-width="formLabelWidth">
                    <el-input v-model="webUrl" placeholder="搜索词用%s替换" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Name" :label-width="formLabelWidth">
                    <el-input v-model="webName" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="addWebVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="addWeb">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import config from "@/config";
import router from "@/router";
import { post } from "@/utils/http";
import { ref } from "vue";

const props = defineProps(['item'])


const isExpand = ref(false)

const updateCategoryVisible = ref(false)
const deleteCategoryVisible = ref(false)

const addWebVisible = ref(false)
const webUrl = ref('')
const webName = ref('')


// 删除栏目
const deleteWebCategory = () => {
    post(config.config.deleteSearchCategory, { "id": props.item.id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}
//编辑栏目

const updateCategory = () => {
    if (props.item.name.length < 1) {
        return
    }
    post(config.config.updateSearchCategory, { "name": props.item.name, "id": props.item.id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}

// 添加网站
const addWeb = () => {
    if (webUrl.value.length < 1) {
        return
    }
    post(config.config.addSearch, { "uri": webUrl.value, "name": webName.value, "category_id": props.item.id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}

const deleteWeb = (id) => {
    post(config.config.deleteSearch, { "id": id }).then((resp) => {
        let res = resp.data
        if (res.errCode != 0) {
            alert(res.data)
        } else {
            router.go(0)
        }
    })
}
</script>
